<template>
  <div class="wrap">
    <nav>
      <div class="container">
        <div class="nav_lis">
          <span :class="onShow ? 'iconfont icon-geren' : ''"></span
          ><span v-if="onShow">xiaotuxian001</span
          ><span @click="onLogin" v-else>请先登录</span>
        </div>
        <div class="nav_lis">
          <span class="" v-if="onShow" @click="onQuit">退出登录</span
          ><span class="btns" v-else>免费注册</span>
        </div>
        <div class="nav_lis" @click="orderFn()">我的订单</div>
        <div class="nav_lis">会员中心</div>
        <div class="nav_lis">帮助中心</div>
        <div class="nav_lis">关于我们</div>
        <div class="nav_lis">
          <span class="iconfont icon-shouji"></span>手机版
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  props: ["onShow"],
  methods: {
    onLogin() {
      this.$router.push("/login");
    },
    orderFn(){
      this.$router.push('/home/order');
    }
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  color: rgb(205, 205, 205);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  background-color: #333333;
  nav {
    background-color: #333333;
    .container {
      width: 100%;
      height: 53px;
      color: #cdcdcd;
      line-height: 53px;
    }
    .nav_lis {
      padding: 0 15px;
      color: #cdcdcd;
      line-height: 1;
      display: inline-block;
      border-left: 2px solid #666;
      font-size: 14px;
      cursor: pointer;
      .iconfont {
        font-size: 14px;
        margin-right: 2px;
      }
      .nav_lis:hover {
        color: #27ba9b;
      }
    }
    .nav_lis:first-child {
      border: none;
    }
  }
}
</style>